<template>
  <basic-dialog v-model="visible" title="修改密码" :submitBtnLoading="submitBtnLoading" @submit="handleSubmit" width="500">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="新密码" prop="password">
        <el-input v-model="formData.password" placeholder="请输入新密码" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="formData.confirmPassword" placeholder="请输入确认密码" type="password"></el-input>
      </el-form-item>
    </el-form>
  </basic-dialog>
</template>


<script setup>
import { useUserStore } from '@/store/user.js'
const { userInfo } = storeToRefs(useUserStore())

import { apiEditPassword } from '@/apis/global'
const visible = ref(false)
const formData = reactive({
  password: '',
  confirmPassword: '',
})

const submitBtnLoading = ref(false)

const rules = {
  password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
  ],
}

const open = () => {
  formData.password = ''
  formData.confirmPassword = ''
  visible.value = true
}
const formRef = ref()
const handleSubmit = async () => {
  await formRef.value.validate()
  await apiEditPassword({
    ...formData,
    userId: userInfo.value.id,
  }, submitBtnLoading)
  ElMessage.success('修改成功！')
  visible.value = false
}

defineExpose({
  open,
})
</script>